<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的首页</title>
  <link rel="stylesheet" href="./../../static/student/css/style.css">
  <script defer src="./../../static/student/js/student-home.js"></script>
</head>
<body>
  <!-- 顶部导航栏 -->
  <header class="navbar">
    <div class="logo">Student Panel</div>
    <h1>我的首页</h1>
    <div class="user-info">
      <img src="student-avatar.jpg" alt="Student Avatar" class="avatar">
      <button class="logout-btn" id="logout-btn">退出</button>
    </div>
  </header>

  <!-- 侧边导航栏 -->
  <aside class="sidebar">
    <ul>
      <li><a href="student-home.html">首页</a></li>
      <li><a href="learning-management.html">学习管理</a></li>
      <li><a href="S-attendance-management.html">点名管理</a></li>
    </ul>
  </aside>

  <!-- 主内容区域 -->
  <main>
    <!-- 欢迎信息部分 -->
    <section class="welcome-message">
      <p id="welcome-message">欢迎, <span id="student-name">学生</span></p> <!-- 学生姓名 -->
      <p>学号: <span id="student-id">12345</span></p> <!-- 显示学号 -->
      <p>当前状态: <span id="student-status">已批准</span></p> <!-- 学生状态 -->
    </section>

    <!-- 学习进度部分 -->
    <section class="learning-progress">
      <h2>学习进度</h2>
      <div id="learning-progress">
        <!-- 这里展示每门课程的进度条，动态加载 -->
        <div class="course-progress">
          <p>课程名称: <span class="course-name">Java基础</span></p>
          <progress value="50" max="100"></progress>
          <p>进度: 50%</p>
        </div>
        <!-- 更多课程进度可以在此处动态加载 -->
      </div>
    </section>

    <!-- 成绩展示 -->
    <section class="grades">
      <h2>我的成绩</h2>
      <table>
        <thead>
          <tr>
            <th>课程</th>
            <th>成绩</th>
            <th>评语</th>
          </tr>
        </thead>
        <tbody>
          <!-- 这里展示学生的成绩和评语，动态加载 -->
          <tr>
            <td>Java基础</td>
            <td>90</td>
            <td>表现优秀</td>
          </tr>
          <tr>
            <td>数据库管理</td>
            <td>85</td>
            <td>良好</td>
          </tr>
        </tbody>
      </table>
    </section>

    <!-- 出勤记录 -->
    <section class="attendance">
      <h2>出勤记录</h2>
      <table>
        <thead>
          <tr>
            <th>课程</th>
            <th>日期</th>
            <th>出勤情况</th>
            <th>缺席原因</th>
          </tr>
        </thead>
        <tbody>
          <!-- 这里展示学生的出勤记录 -->
          <tr>
            <td>Java基础</td>
            <td>2024-12-20</td>
            <td>出席</td>
            <td>无</td>
          </tr>
          <tr>
            <td>数据库管理</td>
            <td>2024-12-18</td>
            <td>缺席</td>
            <td>生病</td>
          </tr>
        </tbody>
      </table>
    </section>

    <!-- 快捷链接按钮 -->
    <section class="quick-links">
      <button onclick="location.href='learning-management.html'">我要学习</button>
      <button onclick="location.href='S-attendance-management.html'">我要点名</button>
      <button onclick="location.href='grades.html'">查看成绩</button>
      <button onclick="location.href='activities.html'">查看活动</button>
    </section>
  </main>

  <!-- 底部信息 -->
  <footer class="footer">
    <p>© 2024 Student Panel, All Rights Reserved</p>
    <a href="/help">帮助</a> | <a href="/contact">联系我们</a>
  </footer>
</body>
</html>
